<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8" />
	<title>logicflow</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<!--css-->
	<link rel="stylesheet" href="./core/dist/style/index.css"/>
	<!--LogicFlow extension包css-->
	<link rel="stylesheet" href="./extension/lib/style/index.css"/>
	<!--js-->
	<!--LogicFlow core包js-->
	<script src="./core/dist/logic-flow.js"></script>
	<!--LogicFlow的插件支持单个引入，这里以菜单插件为例-->
	<script src="./extension/lib/Menu.js"></script>
	<script src="./extension/lib/DndPanel.js"></script>
	<script src="./extension/lib/Control.js"></script>
	<script src="./extension/lib/MiniMap.js"></script>
	<script src="./extension/lib/InsertNodeInPolyline.js"></script>
	<script src="./extension/lib/Snapshot.js"></script>
	<script src="./extension/lib/Layout.js"></script>
</head>

<body>
	<div id="container" style="height: 890px;width: 100%;"></div>
	<script>
		// 准备数据
		const data = {
		// 节点
		nodes: [
			{
			id: '21',
			type: 'rect',
			x: 100,
			y: 200,
			text: '矩形节点',
			},
			{
			id: '50',
			type: 'circle',
			x: 300,
			y: 400,
			text: '圆形节点',
			},
		],
		// 边
		edges: [
			{
			type: 'polyline',
			sourceNodeId: '50',
			targetNodeId: '21',
			},
		],
		};
		const { Dagre } = Layout;
		// 渲染画布
		const lf = new LogicFlow({
			container: document.querySelector('#container'),
			grid: true, 
  			plugins: [Menu,DndPanel,Control,MiniMap,InsertNodeInPolyline,Snapshot,Dagre], 

		});

		// 为菜单追加选项（必须在 lf.render() 之前设置）
		lf.extension.menu.addMenuConfig({
		nodeMenu: [
			{
			text: "分享",
			callback() {
				alert("分享成功！");
			},
			},
			{
			text: "属性",
			callback(node) {
				alert(`
				节点id：${node.id}
				节点类型：${node.type}
				节点坐标：(x: ${node.x}, y: ${node.y})`);
			},
			},
		],
		edgeMenu: [
			{
			text: "属性",
			callback(edge) {
				alert(`
				边id：${edge.id}
				边类型：${edge.type}
				边坐标：(x: ${edge.x}, y: ${edge.y})
				源节点id：${edge.sourceNodeId}
				目标节点id：${edge.targetNodeId}`);
			},
			},
		],
		graphMenu: [
			{
			text: "分享",
			callback() {
				alert("分享成功！");
			},
			},
		],
		});

		lf.extension.dndPanel.setPatternItems([
			{
				label: '选区',
				icon: '',
				callback: () => {
				lf.extension.selectionSelect.openSelectionSelect();
				lf.once('selection:selected', () => {
					lf.extension.selectionSelect.closeSelectionSelect();
				});
				}
			},
			{
				type: 'circle',
				text: '开始',
				label: '开始节点',
				icon: '',
			},
			{
				type: 'rect',
				label: '用户任务',
				icon: '',
				className: 'important-node'
			},
			{
				type: 'rect',
				label: '系统任务',
				icon: '',
				className: 'import_icon'
			},
			{
				type: 'diamond',
				label: '条件判断',
				icon: '',
			},
			{
				type: 'circle',
				text: '结束',
				label: '结束节点',
				icon: '',
			}
		]);

		lf.extension.control.addItem({
			key: 'mini-map',
			iconClass: "custom-minimap",
			title: "",
			text: "导航",
			onMouseEnter: (lf, ev) => {
				const position = lf.getPointByClient(ev.x, ev.y);
				lf.extension.miniMap.show(
				position.domOverlayPosition.x - 120,
				position.domOverlayPosition.y + 35
				);
			},
			onClick: (lf, ev) => {
				const position = lf.getPointByClient(ev.x, ev.y);
				lf.extension.miniMap.show(
				position.domOverlayPosition.x - 120,
				position.domOverlayPosition.y + 35
				);
			},
		});
		//图片下载
		// lf.extension.snapshot.useGlobalRules = false;
		// lf.getSnapshot() 
		lf.render(data);
		lf.translateCenter(); // 将图形移动到画布中央
		
		// 自动布局
		lf.autoLayout = function(){
			lf.extension.dagre.layout({
				rankdir: 'TB',   // 从上到下的布局方向
				align: 'UL',     // 上左对齐
				nodesep: 60,     // 节点间距
				ranksep: 70      // 层级间距
			});
		}
		lf.autoLayout();
	</script>
</body>

</html>